$(()=>{
    let url= {
        base: 'https://api.douban.com'
    }
    let start = 0
    let end
    init()
    function init () {
        mui('.mui-scroll-wrapper').scroll({
            deceleration: 0.0005                        //系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
        })
        mui('.mui-slider').slider({
            interval: 1000                              //自动轮播周期，若为0则不自动播放，默认为0；
        })
        mui.init({
            pullRefresh : {
                container:"#refreshContainer",          //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                down : {
                    auto: true,                         //可选,默认false.首次加载自动下拉刷新一次
                    contentdown : "下拉可以刷新",        //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                    contentover : "释放立即刷新",        //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                    contentrefresh : "正在刷新...",     //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                    callback : function () {
                        start = 0                         
                        get_list(start).then(res=>{
                            console.log(res)
                            let list = res.subjects                 // [card, card, card, .....]    
                            end = res.count                         // 总共有多少页
                            $('#refreshContainer .card').remove()   // 将以前的card 删除
                            render(list)                            // 往list 里面添加 card
                            this.endPulldownToRefresh()             // 停止下拉刷新
                            this.refresh(true)                      // 上拉加载重置
                        })
                    }
                },
                up : {
                    callback : function () {
                        start++
                        if (start>=6) {
                            this.endPullupToRefresh(true)           // 上啦加载永久失效--->除非重置
                        }
                        else{
                            setTimeout(()=>{
                                get_list(start).then(res=>{
                                    let list = res.subjects
                                    render(list)
                                    this.endPullupToRefresh()       // 停止当前上啦加载
                                })
                            },3000)
                        }
                    }
                }
            }
        })
    }
    // 将请求到的数据添加到视图
    function render (list) {
        list.map(item=>{
            let s = stars(item.rating.average)
            let g = genres(item.genres)
            let card = `
                <div class="card">
                    <img class="left" src="${item.images.small}" alt="电影海报">
                    <div class="right">
                        <h3 class="nowrap">${item.title}</h3>
                        <h4 class="nowrap">${item.original_title}</h4>
                        <p>评分<span>${item.rating.average}</span> ${s}</p>
                        <p class='geners'>${g}</p>
                    </div>
                </div>
            `
            $('.mui-scroll .list').append(card)
        })
    }
    // 生成标签
    function genres (genres) {
        let g = ''
        genres.map(item=>{
            g += `<span>${item}</span>`
        })
        return g
    }
    // 生成星星
    function stars (average) {
        let num = parseInt(average/2)
        let has_half = average%2!==0?true:false
        let star = ''
        for (let i=0; i<num; i++) {
            star += '<i class="fa fa-star"></i>'
        }
        if (has_half) star+='<i class="fa fa-star-half-o"></i>'
        return star
    }
    // 获取数据
    function get_list (start) {
        return new Promise((resolve, reject)=>{
            $.ajax({
                type: 'get',
                url: url.base+'/v2/movie/in_theaters',
                dataType: 'jsonp',
                data: {start},
                success: data=>resolve(data)
            })
        })
    }
})